<template lang="">
		<div  class="flex-3">
			<div id="category1" style="height: 30px"></div>
		</div>
</template>
<script >
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
export default {
  props: ['id'],
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
    console.log(this.id)
  },
  setup() {
    const el = ref();
    onMounted(() => {
      el.value; // <div>
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("category1"));
      // 绘制图表
      myChart.setOption({
        left: "auto",
        right: "auto",
        align: "center",
        height: "100%",
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        xAxis: [
          {
            name: "",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              show: false,
            },
            axisTick: false,
            axisLine: {
              show: false,
            },
          },
        ],

        yAxis: {
          splitLine: {
            show: false,
          },
          name: "",
          axisLabel: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            lineStyle: {
              width: 1,
              color: "rgb(13, 124, 239)",
            },
            showSymbol: false,
            areaStyle: {
              color: '#c2dfff'
            },
            emphasis: {
              focus: "series",
            },
            // data: data,
            data: [20, 150, 202, 111, 200, 240, 150, 200, 100],
          },
        ],
      });
    });
  }
}

</script>
<style>
/* .title{
  font-size:13px;
  font-weight:600;
} */
.font-12 {
  font-size: 12px
}

#curve1 {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
}

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.text-align-right {
  text-align: right
}

/* #curve1{
  margin: 0 ;
  padding:0;
} */
#curve1 {
  padding: 2px;
  border-radius: 6px;
  line-height: 10px;
}
</style>
